<template>
  <div v-if="friend" class="main">
    <div class="centx">
      <el-avatar
        shape="square"
        :size="110"
        :src="photourl(friend.photo)"
      ></el-avatar>
      <div class="user-name">{{ friend.name }}</div>
      <div class="fgx">
        ----------------------------------------------------------------
      </div>
      <div class="user-info-detail">
        <div class="title">
          <p>备&nbsp;&nbsp;&nbsp;&nbsp;注：</p>
          <p>昵&nbsp;&nbsp;&nbsp;&nbsp;称：</p>
          <p>帐号：</p>
        </div>
        <div class="text">
          <p class="noText">
            <a
              href="javascript:;"
              node-type="user-remark-button"
              title="点击添加备注"
              @click="openbz"
              >{{ friend.comments || "点击添加备注" }}</a
            >
          </p>
          <p>{{ friend.name }}</p>
          <p>{{ friend.email }}</p>
        </div>
      </div>
      <div class="user-info-button">
        <div>
          <el-button type="primary" class="btn1" @click="openMessage"
            >分享文件</el-button
          >
        </div>
        <div>
          <el-button plain class="btn1" @click="removefriend" type="danger"
            >删除好友</el-button
          >
          <el-button plain class="btn1" type="warning" @click="removeMessage"
            >清空消息</el-button
          >
        </div>
      </div>
    </div>

    <el-dialog title="好友备注" :visible.sync="bzVisible" width="500px">
      <div class="bz">
        备注:
        <div>
          <el-input v-model="bz" autocomplete="off" ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bzVisible = false">取 消</el-button>
        <el-button type="primary" @click="ackbz()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Session",
  props: { friend: {} },
  data() {
    return {
      bzVisible: false,
      bz: null,
    };
  },
  computed: {
    ...mapState(["userId"]),
  },
  created() {},
  methods: {
    //清空消息
    removeMessage() {
      this.$confirm("确认清空消息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$https
            .delete(`/message/${this.userId}/${this.friend.id}`)
            .then((d) => {
              if (d.code !== 200) {
                this.$message.error(d.msg || d.data);
              } else {
                this.$message.success("清空成功");
              }
            })
            .catch((d) => {
              this.$message.error(d.msg || d.data);
            });
        })
        .catch((e) => {
          this.$message.info("已取消");
        });
    },
    //删除好友
    removefriend() {
      this.$confirm("确认删除好友", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$https
            .delete(`/friends/${this.userId}/${this.friend.id}`)
            .then((d) => {
              //  debugger
              if (d.code !== 200) {
                this.$message.error(d.msg || d.data);
              } else {
                this.$message.success("删除成功");
                // this.friend=null
                this.$emit('reload')
              }
            })
            .catch((d) => {
             this.$message.error(d)
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    openbz() {
      this.bzVisible = true;
    },
    ackbz() {
      this.$https
        .post(`/friends/bz`, {
          userid: this.userId,
          friendsid: this.friend.id,
          comments: this.bz,
        })
        .then((d) => {
          if (d.code == 200) {
            this.bzVisible = false;
            this.friend.comments = this.bz;
            this.bz = null;
            this.$message.success("设置成功");
          }
        });
    },
    photourl(photo) {
      return `${process.env.VUE_APP_SERVER_HOST}${photo}`;
    },
    openMessage() {
      this.$emit("openMessage", this.friend);
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.main {
  display: flex;
  justify-content: center;
  text-align: center;
  .centx {
    padding-top: 180px;
    .user-name {
      text-align: center;
      font-size: 30px;
      color: rgb(46, 44, 44);
      font: 700 26px/60px "microsoft YaHei";
    }
    .fgx {
      color: rgb(226, 226, 208);
      font-weight: bolder;
    }
  }
}

.user-info-detail .title,
.user-info-detail .text {
  display: inline-block;
  text-align: left;
}

.user-info-button {
  width: 400px;
  .btn1 {
    margin-left: 0px;
    width: 350px;
    margin-top: 10px;
  }
}
.bz {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
</style>